/*
 * @Author: redman9
 * @Date: 2018-10-22 15:26:06
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-12-08 14:30:52
 */
<template>
    <div class="container user-list-container">
        <div class="operation-wrapper">
            <a
                :href="exportLink"
                target="_blank">
                <el-button
                    type="primary"
                    :disabled="!authResult.auth_export"
                    size="small">Excel导出</el-button>
            </a>
        </div>
        <div class="content-wrapper">
            <div class="stat-wrapper">
                <p
                    v-if="filterData.task_no && statData.end_time"
                    class="desc">
                    截止日期：{{ statData.end_time * 1000 | dateFormatter('yyyy-MM-dd HH:mm') }}
                </p>
                <el-alert
                    v-else
                    class="alert-search-task"
                    title="提示：搜索任务，查看任务统计数据"
                    :closable="false"
                    type="warning" />
                <div class="stat">
                    <div class="stat-item">
                        <p class="title blue">任务要求总数</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.all_count === undefined}">
                            {{ statData.all_count !== undefined ? statData.all_count : '— —' }}
                        </p>
                    </div>
                    <div class="stat-item">
                        <p class="title green">已完成</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.complete_done_num === undefined}">
                            {{ statData.complete_done_num !== undefined ? statData.complete_done_num : '— —' }}
                        </p>
                    </div>
                    <div class="stat-item">
                        <p class="title orange">待完成</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.complete_wait_num === undefined}">
                            {{ statData.complete_wait_num !== undefined ? statData.complete_wait_num : '— —' }}
                        </p>
                    </div>
                    <div class="stat-item">
                        <p class="title orange">待审核</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.audit_wait_num === undefined}">
                            {{ statData.audit_wait_num !== undefined ? statData.audit_wait_num : '— —' }}
                        </p>
                    </div>
                    <div class="stat-item">
                        <p class="title red">审核不通过</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.audit_fail_num === undefined}">
                            {{ statData.audit_fail_num !== undefined ? statData.audit_fail_num : '— —' }}
                        </p>
                    </div>
                </div>
            </div>
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <!-- <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="任务名称：">
                            <el-select
                                v-model="filterData.task_no"
                                filterable
                                @change="handleSelectedTaskChanged"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in tasks"
                                    :key="item.task_no"
                                    :label="item.title"
                                    :value="item.task_no" />
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="手机号：">
                            <el-input
                                v-model="filterData.phone"
                                placeholder="请输入手机号" />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="用户编号：">
                            <el-input
                                v-model="filterData.user_no"
                                placeholder="请输入用户编号" />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="search-btn-wrapper"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData">搜索</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    @sort-change="handleSortChanged">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="title"
                        width="150"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        label="任务名称"/>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="nickname"
                        show-overflow-tooltip
                        label="用户昵称" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="phone"
                        min-width="110"
                        label="手机号" />
                    <el-table-column
                        prop="complete_done_num"
                        sortable="custom"
                        :min-width="100"
                        label="已完成数" />
                    <el-table-column
                        prop="complete_wait_num"
                        sortable="custom"
                        :min-width="100"
                        label="待完成数" />
                    <el-table-column
                        prop="audit_wait_num"
                        sortable="custom"
                        :min-width="100"
                        label="待审核数" />
                    <el-table-column
                        prop="audit_fail_num"
                        sortable="custom"
                        :min-width="128"
                        label="审核不通过数" />
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        width="110">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    :disabled="!authResult.auth_audit"
                                    @click="$router.push({name: 'TaskReviewListForAgent', query: { task_no: scope.row.task_no, parent_user_no: scope.row.user_no, one_task: 1 }})">查看执行详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
    </div>
</template>

<script>
let sortMap = {
    'ascending': 'asc',
    'descending': 'desc'
};

export default {
    data() {
        return {
            authResult: {},
            tasks: [],
            statData: {},
            tableData: [],
            filterData: {
                user_no: '',
                phone: '',
                task_no: ''
            },
            sortData: {
                field: '',
                by: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            }
        };
    },
    computed: {
        exportLink() {
            let { user_no, phone, task_no } = this.filterData;
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');

            return `${base}/task/task_invite%5Cexport?task_no=${task_no}&phone=${phone}&user_no=${user_no}&sort=${this.sortData.field ? JSON.stringify([this.sortData]) : ''}&__ticket=${ticket}`;
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "任务反馈系统",
            },
            {
                title: '任务管理'
            },
            {
                title: "代理统计列表"
            }
        ]);
        let { user_no, phone, task_no, now_page } = this.$route.query;

        this.filterData.user_no = user_no || '';
        this.filterData.phone = phone || '';
        this.filterData.task_no = task_no || '';
        this.page.now_page = now_page || 1;
        if (!task_no) {
            this.$message({
                type: 'warning',
                message: '没有获取任务 id'
            });
            return;
        }
        this.getTableData();
    },
    methods: {
        /**
         * 获取任务名称列表
         */
        // getTasks() {
        //     this.$post('/task/task%5Csuggest', {
        //         query: ''
        //     }, resp => {
        //         if (resp.code == 1) {
        //             this.tasks = resp.data.list;
        //         }
        //     });
        // },

        /**
         * 获取表格数据
         */
        getTableData(page) {
            let { user_no, phone, task_no } = this.filterData;

            this.$router.replace({
                name: this.$route.name,
                query: {
                    task_no,
                    user_no,
                    phone,
                    now_page: page || this.page.now_page
                }
            });
            this.$post('/task/task_invite%5Clist', {
                page_id: page || this.page.now_page,
                user_no,
                phone,
                task_no,
                sort: this.sortData.field ? JSON.stringify([this.sortData]) : ''
            }, resp => {
                if (resp.code == 1) {
                    this.statData = resp.data.stat;
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 选择任务改变的时候清空统计数据
         */
        handleSelectedTaskChanged() {
            for (let i in this.statData) {
                this.statData[i] = undefined;
            }
        },

        /**
         * 排序
         */
        handleSortChanged(data) {
            if (data.order) {
                this.sortData.field = data.prop;
                this.sortData.by = sortMap[data.order];
            } else {
                this.sortData.field = '';
                this.sortData.by = '';
            }

            this.getTableData();
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.stat-wrapper {
    margin-bottom: 15px;
    .desc {
        margin-bottom: 10px;
        line-height: 20px;
        color: #666;
    }
    .alert-search-task {
        margin-bottom: 15px;
    }
    .stat {
        display: flex;
        justify-content: space-between;
        margin: 0 -7.5px;
    }
    .stat-item {
        flex: 1;
        height: 104px;
        margin: 0 7.5px;
        padding: 20px 0 20px 33px;
        background-color: #fff;
        box-shadow:0px 2px 4px 0px rgba(0,0,0,0.04);
        border-radius:2px;
        .title {
            position: relative;
            margin-bottom: 4px;
            line-height: 22px;
            color: rgba(0, 0, 0, .45);

            &::before {
                position: absolute;
                content: '';
                width: 2px;
                height: 14px;
                left: -9px;
                top: 50%;
                transform: translate(0, -50%);
            }

            &.blue {
                &:before {
                    background-color: #007AFF;
                }
            }

            &.green {
                &:before {
                    background-color: #00C800;
                }
            }

            &.orange {
                &:before {
                    background-color: #F5A623;
                }
            }

            &.red {
                &:before {
                    background-color: #FF0019;
                }
            }
        }
        .num {
            font-size: 30px;
            line-height: 38px;

            &.empty {
                font-size: 15px;
                color: rgba(0, 0, 0, .65);
            }
        }
    }
}
.search-wrapper {
    padding: 15px 15px 0;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>
